var slid = document.getElementById("banner");
//var id = document.getElementById("bt");
var imgwidth = document.getElementsByClassName("m");
var oli=document.getElementsByTagName("li");
//console.log(oli);
//console.log(imgwidth );
var i =0;
auto();
oli[0].style.cssText="background:#ff6700;color:#fff;";
function auto(){

    time = setInterval(function(){
        i++;
        if(i <= 4) {
            slid.style.left = slid.offsetLeft - 1226 + "px";
            oli[i].style.cssText="background:#ff6700;color:#fff;";
            oli[i-1].style.cssText="background:none;color:#000;";
        } else {
            slid.style.left ="0px";
            oli[4].style.cssText="background:none;color:#000;";
            oli[0].style.cssText="background:#ff6700;color:#fff;";
            i=0;
        }
        console.log(i);

    }, 3000)

}

for(var j=0;j<=4;j++){
    //console.log(imgwidth[j].index);
    imgwidth[j].index=j;
    oli[j].index=j;
    oli[j].onmouseover=function(){
        this.style.cssText="background:#ff6700;color:#fff;"
        this.onmouseout=function(){
            this.style.cssText="background:none;color:#000;"
        }
    }

    oli[j].onclick=function(){
        clearInterval(time);
        m=this.index;
        slid.style.left=-m*1226+"px";
        i=m;
        auto();
        console.log(i);
    }
}